React Custom Hook Staatusemasin: Kompleksse Oleku Logika Abstraheerimise Meisterdamine

Reacti rakenduste keerukuse kasvades võib oleku haldamine muutuda märkimisväärseks väljakutseks. Traditsioonilised lähenemisviisid, mis kasutavad `useState` ja `useEffect`, võivad kiiresti viia segase loogika ja raskesti hooldatava koodini, eriti kui tegemist on keeruliste oleku üleminekute ja kõrvalmõjudega. Siin tulevad appi staatusemasinad ja spetsiaalselt neid rakendavad Reacti kohandatud hookid. See artikkel juhendab teid läbi staatusemasina kontseptsiooni, näitab, kuidas neid Reactis kohandatud hookidena rakendada, ja illustreerib nende eeliseid skaleeritavate ja hooldatavate rakenduste loomisel globaalsele publikule.

Mis on Staatusemasin?

Staatusemasin (või lõplik staatusemasin, FSM) on matemaatiline arvutusmudel, mis kirjeldab süsteemi käitumist, määrates kindlaks lõpliku arvu olekuid ja üleminekuid nende olekute vahel. Mõelge sellele nagu skeemile, kuid rangemate reeglite ja formaalsema määratlusega. Peamised kontseptsioonid hõlmavad:

• Olekuid: Esindavad süsteemi erinevaid tingimusi või etappe.
• Üleminekuid: Määravad, kuidas süsteem liigub ühest olekust teise konkreetsete sündmuste või tingimuste alusel.
• Sündmusi: Päästikud, mis põhjustavad oleku üleminekuid.
• Algolekut: Oleku, milles süsteem alustab.

Staatusemasinad on suurepärased süsteemide modelleerimisel, millel on selgelt määratletud olekud ja üleminekud. Näiteid on külluses reaalmaailma stsenaariumides:

• Liiklusvalgud: Tsüklitakse läbi olekute nagu punane, kollane, roheline, üleminekud, mida käivitavad taimerid. See on globaalselt äratuntav näide.
• Tellimuste töötlemine: E-kaubanduse tellimus võib liikuda läbi olekute nagu "Ootel", "Töötlemisel", "Saadetud" ja "Kohale toimetatud". See kehtib universaalselt veebimüügi kohta.
• Autentimise voog: Kasutaja autentimisprotsess võib hõlmata olekuid nagu "Välja logitud", "Sisselogimine", "Sisse logitud" ja "Viga". Turvaprotokollid on üldiselt riikide lõikes ühtsed.

Miks Kasutada Reactis Staatusemasinaid?

Staatusemasinate integreerimine teie Reacti komponentidesse pakub mitmeid veenvaid eeliseid:

• Parem Koodikorraldus: Staatusemasinad tagavad struktureeritud lähenemise oleku haldamisele, muutes teie koodi ettearvatavamaks ja kergemini mõistetavaks. Enam pole spagettikoodi!
• Vähendatud keerukus: Olekuid ja üleminekuid selgesõnaliselt määratledes saate keerulist loogikat lihtsustada ja vältida soovimatuid kõrvalmõjusid.
• Täiustatud testimisvõime: Staatusemasinaid on loomult lihtne testida. Saate süsteemi õiget käitumist hõlpsasti kontrollida, testides iga olekut ja üleminekut.
• Suurem hooldatavus: Staatusemasinate deklaratiivne olemus muudab teie koodi muutumise ja laiendamise teie rakenduse arenedes lihtsamaks.
• Parem visualiseerimine: Olemas on tööriistu, mis saavad staatusemasinaid visualiseerida, pakkudes selget ülevaadet teie süsteemi käitumisest, aidates koostööd ja mõistmist erineva oskuste tasemega meeskondade vahel.

Staatusemasina Rakendamine Reacti Kohandatud Hookina

Illustreerime, kuidas rakendada staatusemasinat Reacti kohandatud hooki abil. Loome lihtsa näite nupust, mis võib olla kolmes olekus: `idle`, `loading` ja `success`. Nupp algab `idle` olekus. Kui seda klõpsatakse, läheb see üle `loading` olekusse, simuleerib laadimisprotsessi (kasutades `setTimeout`) ja seejärel läheb üle `success` olekusse.

1. Staatusemasina Määratlemine

Kõigepealt määratleme oma nupu staatusemasina olekud ja üleminekud:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Pärast 2 sekundit, üleminek success olekusse
      },
    },
    success: {},
  },
};

See konfiguratsioon kasutab raamatukonnast sõltumatut (kuigi XState'ist inspireeritud) lähenemisviisi staatusemasina määratlemiseks. Me rakendame ise kohandatud hookis seda määratlust tõlgendavat loogikat. `initial` atribuut seab algolekuks `idle`. `states` atribuut määratleb võimalikud olekud (`idle`, `loading` ja `success`) ning nende üleminekud. `idle` olekul on `on` atribuut, mis määratleb ülemineku `loading` olekusse, kui tekib `CLICK` sündmus. `loading` olek kasutab `after` atribuuti, et automaatselt üle minna `success` olekusse pärast 2000 millisekundit (2 sekundit). `success` olek on antud näites terminalolek.

2. Kohandatud Hooki Loomine

Nüüd loome kohandatud hooki, mis rakendab staatusemasina loogikat:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Puhastamine unmounteerimisel või oleku muutmisel
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

See `useStateMachine` hook võtab argumendiks staatusemasina definitsiooni. See kasutab `useState` praeguse oleku ja konteksti haldamiseks (selgitame konteksti hiljem). `transition` funktsioon võtab argumendiks sündmuse ja värskendab praegust olekut staatusemasina definitsioonis määratletud üleminekute alusel. `useEffect` hook haldab `after` atribuuti, seades taimereid, et automaatselt üle minna järgmisesse olekusse pärast kindlaksmääratud kestust. Hook tagastab praeguse oleku, konteksti ja `transition` funktsiooni.

3. Kohandatud Hooki Kasutamine Komponendis

Lõpuks kasutame kohandatud hooki Reacti komponendis:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Pärast 2 sekundit, üleminek success olekusse
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

See komponent kasutab nupu oleku haldamiseks `useStateMachine` hooki. `handleClick` funktsioon käivitab `CLICK` sündmuse, kui nuppu klõpsatakse (ja ainult siis, kui see on `idle` olekus). Komponent renderdab praeguse oleku põhjal erinevat teksti. Nupp on laadimise ajal keelatud, et vältida mitmekordseid klõpse.

Konteksti Halda mine Staatusemasinates

Paljudes reaalmaailma stsenaariumides peavad staatusemasinad haldama andmeid, mis säilivad oleku üleminekute vahel. Neid andmeid nimetatakse kontekstiks. Kontekst võimaldab teil salvestada ja värskendada asjakohast teavet staatusemasina edenemisel.

Laiendame oma nupu näidet, lisades loenduri, mis suureneb iga kord, kui nupp edukalt laadib. Muudame staatusemasina definitsiooni ja kohandatud hooki, et hallata konteksti.

1. Staatusemasina Määratluse Värskendamine

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Oleme lisanud `context` atribuudi staatusemasina definitsiooni, mille algväärtus `count` on 0. Oleme lisanud ka `entry` tegevuse `success` olekule. `entry` tegevus täidetakse, kui staatusemasin siseneb `success` olekusse. See võtab praeguse konteksti argumendina ja tagastab uue konteksti, mille `count` on suurendatud. Siin näidatud `entry` on näide konteksti muutmise kohta. Kuna JavaScripti objektid edastatakse viitena, on oluline tagastada uus objekt, mitte muuta algset.

2. Kohandatud Hooki Värskendamine

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Puhastamine unmounteerimisel või oleku muutmisel
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Oleme värskendanud `useStateMachine` hooki, et initialiseerida `context` olek `stateMachineDefinition.context` või tühja objektiga, kui konteksti pole antud. Oleme lisanud ka `useEffect`, et hallata `entry` tegevust. Kui praegusel olekul on `entry` tegevus, täidame selle ja värskendame konteksti tagastatud väärtusega.

3. Värskendatud Hooki Kasutamine Komponendis

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

Me pääseme nüüd komponendis juurde `context.count` ja kuvame selle. Iga kord, kui nupp edukalt laadib, suureneb loendur.

Täpsemad Staatusemasina Kontseptsioonid

Kuigi meie näide on suhteliselt lihtne, saavad staatusemasinad hakkama palju keerukamate stsenaariumitega. Siin on mõned täpsemad kontseptsioonid, mida kaaluda:

• Kaitsjad (Guards): Tingimused, mis peavad olema täidetud, et üleminek saaks toimuda. Näiteks võib üleminek olla lubatud ainult siis, kui kasutaja on autentitud või kui teatud andmete väärtus ületab künnise.
• Tegevused (Actions): Kõrvalmõjud, mis täidetakse olekusse sisenemisel või sealt lahkumisel. Need võivad hõlmata API-kutsete tegemist, DOM-i värskendamist või sündmuste saatmist teistele komponentidele.
• Paralleelsed Olekuid: Võimaldavad teil modelleerida süsteeme mitmete samaaegsete tegevustega. Näiteks võib videopleieril olla üks staatusemasin taasesituse juhtimiseks (esita, pausi, peata) ja teine video kvaliteedi haldamiseks (madal, keskmine, kõrge).
• Hierarhilised Olekuid: Võimaldavad teil olekuid teiste olekute sisse pesastada, luues olekute hierarhia. See võib olla kasulik keerukate süsteemide modelleerimisel paljude seotud olekutega.

Alternatiivsed Raamatukogud: XState ja Rohkem

Kuigi meie kohandatud hook pakub staatusemasina põhjalikku rakendust, võib mitmed suurepärased raamatukogud protsessi lihtsustada ja pakkuda rohkem täpsemaid funktsioone.

XState

XState on populaarne JavaScripti raamatukogu staatusemasinate ja olekukaartide loomiseks, tõlgendamiseks ja täitmiseks. See pakub võimsat ja paindlikku API-d keerukate staatusemasinate määratlemiseks, sealhulgas tuge kaitsjatele, tegevustele, paralleelsetele olekutele ja hierarhilistele olekutele. XState pakub ka suurepäraseid tööriistu staatusemasinate visualiseerimiseks ja silumiseks.

Muud Raamatukogud

Muud valikud hõlmavad:

• Robot: Kerge oleku haldamise raamatukogu, mis keskendub lihtsusele ja jõudlusele.
• react-automata: Raamatukogu, mis on spetsiaalselt loodud staatusemasinate integreerimiseks Reacti komponentidesse.

Raamatukogu valik sõltub teie projekti spetsiifilistest vajadustest. XState on hea valik keerukate staatusemasinate jaoks, samas kui Robot ja react-automata sobivad lihtsamateks stsenaariumiteks.

Parimad Praktikad Staatusemasinate Kasutamiseks

Et tõhusalt kasutada staatusemasinaid oma Reacti rakendustes, kaaluge järgmisi parimaid praktikaid:

• Alustage Väikesest: Alustage lihtsatest staatusemasinatest ja suurendage järk-järgult keerukust vastavalt vajadusele.
• Visualiseerige Oma Staatusemasinat: Kasutage visualiseerimistööriistu, et saada selge ülevaade oma staatusemasina käitumisest.
• Kirjutage Põhjalikud Testid: Testige põhjalikult iga olekut ja üleminekut, et tagada süsteemi õige käitumine.
• Dokumenteerige Oma Staatusemasinat: Dokumenteerige selgelt oma staatusemasina olekuid, üleminekuid, kaitsjaid ja tegevusi.
• Kaaluge Rahvusvahelistamist (i18n): Kui teie rakendus on suunatud globaalsele publikule, veenduge, et teie staatusemasina loogika ja kasutajaliides on nõuetekohaselt rahvusvahelistatud. Näiteks kasutage erinevaid kuupäevavorminguid või valuutasümboleid erinevate kasutajate lokaliseerimiseks, kasutades selleks eraldi staatusemasinaid või konteksti.
• Ligipääsetavus (a11y): Veenduge, et teie oleku üleminekud ja kasutajaliidese värskendused on puuetega kasutajatele ligipääsetavad. Kasutage abistavaid tehnoloogiaid, et pakkuda õiget konteksti ja tagasisidet, kasutades ARIA atribuute ja semantilist HTML-i.

Kokkuvõte

Reacti kohandatud hookid koos staatusemasinatega pakuvad võimsat ja tõhusat lähenemisviisi keerukate oleku loogika haldamiseks Reacti rakendustes. Oleku üleminekute ja kõrvalmõjude abstraheerimisel selgelt määratletud mudelisse saate parandada koodikorraldust, vähendada keerukust, parandada testimisvõimet ja suurendada hooldatavust. Olenemata sellest, kas rakendate oma kohandatud hooki või kasutate sellist raamatukogu nagu XState, staatusemasinate integreerimine teie Reacti töövoogu võib oluliselt parandada teie rakenduste kvaliteeti ja skaleeritavust kogu maailmas kasutajatele.